<template>
  <div>
    <el-container style="margin:0;">
     <div>
       <el-main style="display: block;padding-top: 10px;">
         <el-row type="flex" justify="space-between">
           <el-col class="ta-c mr30">
             <el-card class="box-card bor-1-ccc">
               <div class="ta-l bold">本日发运</div>
               <el-main class="bgc-fff" style="padding: 20px 0 0 0;">
                 <el-row type="flex" align="bottom" class="el-col-24-clear f10 mb10 w100">
                   <el-col class="Highlight-bold pad-r10">{{deliveryTodayInfo.amount}}</el-col>
                   <el-col>台商品车，运输里程</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{deliveryTodayInfo.miles}}</el-col>
                   <el-col>万公里</el-col>
                 </el-row>
                 <el-row type="flex" align="bottom" class="el-col-24-clear mb10 f10 w100">
                   <el-col>其中：公路运输</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{deliveryTodayInfo.amount_road}}</el-col>
                   <el-col>台</el-col>
                 </el-row>
                 <el-row type="flex" align="bottom" class="el-col-24-clear f10 w100">
                   <el-col>铁路运输</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{deliveryTodayInfo.amount_rail}}</el-col>
                   <el-col>台;水路运输</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{deliveryTodayInfo.amount_water}}</el-col>
                   <el-col>台</el-col>
                 </el-row>
               </el-main>
             </el-card>
           </el-col>
           <el-col class="ta-c">
             <el-card class="box-card bor-1-ccc">
               <div class="ta-l bold">本月发运</div>
               <el-main class="bgc-fff" style="padding: 20px 0 0 0;">
                 <el-row type="flex" align="bottom" class="el-col-24-clear f10 mb10 w100">
                   <el-col class="Highlight-bold pad-r10">{{deliveryMonthInfo.amount}}</el-col>
                   <el-col>台商品车，运输里程</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{deliveryMonthInfo.miles}}</el-col>
                   <el-col>万公里</el-col>
                 </el-row>
                 <el-row type="flex" align="bottom" class="el-col-24-clear mb10 f10 w100">
                   <el-col>其中：公路运输</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{deliveryMonthInfo.amount_road}}</el-col>
                   <el-col>台</el-col>
                 </el-row>
                 <el-row type="flex" align="bottom" class="el-col-24-clear f10 w100">
                   <el-col>铁路运输</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{deliveryMonthInfo.amount_rail}}</el-col>
                   <el-col>台;水路运输</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{deliveryMonthInfo.amount_water}}</el-col>
                   <el-col>台</el-col>
                 </el-row>
               </el-main>
             </el-card>
           </el-col>
         </el-row>
         <el-row>
           <el-col class="mt10 card-shadow">
             <already-despatch-chart ref="alreadyDespatchChart" :alreadyDespatchData="alreadyDespatchChartData"></already-despatch-chart>
           </el-col>
         </el-row>
       </el-main>
       <el-main style="display: block;">
         <el-row type="flex" justify="space-between">
           <el-col class="ta-c mr30">
             <el-card class="box-card bor-1-ccc">
               <div class="ta-l bold">本日全网库存</div>
               <el-main class="bgc-fff" style="padding: 20px 0 0 0;">
                 <el-row type="flex" align="bottom" class="el-col-24-clear f10 mb10 w100">
                   <el-col class="Highlight-bold pad-r10">{{stockSummaryInfo.amount}}</el-col>
                   <el-col class="mr10">台商品车</el-col>
                 </el-row>
                 <el-row type="flex" align="bottom" class="el-col-24-clear f10 w100">
                   <el-col>其中：南昌</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{stockSummaryInfo.amount_nanchang}}</el-col>
                   <el-col>;重庆</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{stockSummaryInfo.amount_chongqing}}</el-col>
                 </el-row>
               </el-main>
             </el-card>
           </el-col>
           <el-col class="ta-c">
             <el-card class="box-card bor-1-ccc">
               <div class="ta-l bold">全网超期未发</div>
               <el-main class="bgc-fff" style="padding: 20px 0 0 0;">
                 <el-row type="flex" align="bottom" class="el-col-24-clear f10 mb10 w100">
                   <el-col class="Highlight-bold pad-r10">{{stockOverdueInfo.amount}}</el-col>
                   <el-col class="mr10">台商品车</el-col>
                 </el-row>
                 <el-row type="flex" align="bottom" class="el-col-24-clear f10 w100">
                   <el-col>其中：南昌</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{stockOverdueInfo.amount_nanchang}}</el-col>
                   <el-col>;重庆</el-col>
                   <el-col class="Highlight-bold pad-l-r10">{{stockOverdueInfo.amount_chongqing}}</el-col>
                 </el-row>
               </el-main>
             </el-card>
           </el-col>
         </el-row>
         <!--<el-row>-->
           <!--<el-col class="mt10 card-shadow">-->
             <!--<all-stock-chart :allStockData="allStockChartData"></all-stock-chart>-->
           <!--</el-col>-->
         <!--</el-row>-->
       </el-main>
     </div>
      <el-aside width="400px">
        <el-row >
          <el-col class="mt10 card-shadow bgc-fff">
            <customer-from-chart ref="customerFromChart"></customer-from-chart>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mt10 card-shadow bgc-fff">
            <lsp-from-chart ref="lspFromChart"></lsp-from-chart>
          </el-col>
        </el-row>
      </el-aside>
    </el-container>
  </div>
</template>

<script type="text/ecmascript-6">
  import AlreadyDespatchChart from './components/alreadyDespatchChart'
  import CustomerFromChart from './components/customerFromChart'
  import AllStockChart from './components/allStockChart'
  import LspFromChart from './components/lspFromChart'
  import * as OperationApi from '@/api/operation'
  // const MockOpDeliveryData = require('^/data/OpDelivery')
  export default {
    name: '',
    data() {
      return {
        alreadyDespatchChartData: '', // 发运图表数据
        customerFromChartData: '', // 客户分布图表数据
        // allStockChartData: MockOpDeliveryData.allStockData, // 全网库存图表数据
        lspFromChartData: '', // 运力构成图表数据
        deliveryTodayInfo: '', // 本日发运
        deliveryMonthInfo: '', // 本月发运
        stockSummaryInfo: '', // 全网库存
        stockOverdueInfo: '' // 全网超期
      }
    },
    components: {
      AlreadyDespatchChart, CustomerFromChart, AllStockChart, LspFromChart
    },
    created() {
      this.initData()
    },
    mounted() {
    },
    methods: {
      initData() {
        OperationApi.getLspOperationInfo().then(res => {
          console.log('getLspOperationInfo()-res', res)
          this.deliveryTodayInfo = res.data.delivery_today
          this.deliveryMonthInfo = res.data.delivery_month
          this.stockSummaryInfo = res.data.stock_summary
          this.stockOverdueInfo = res.data.stock_overdue
          this.customerFromChartData = res.data.customer_ranking
          this.lspFromChartData = res.data.lsp_ranking
          this.alreadyDespatchChartData = res.data.already_despatch
          this.$refs.customerFromChart.initCharts(this.customerFromChartData)
          this.$refs.lspFromChart.initCharts(this.lspFromChartData)
          this.$refs.alreadyDespatchChart.initCharts(this.alreadyDespatchChartData)
        }).catch(() => {})
      }
    }
  }
</script>

<style lang="css">

</style>
